   /*

            鼠标拖拽分为3个阶段：

            1、当鼠标在元素上方按下时，拖拽开始（onmousedown）

            2、当鼠标移动时元素跟随鼠标移动，拖拽进行中（onmousemove）

            3、当鼠标松开时，拖拽停止，元素固定在最后所在位置（onmouseup）

        */

        //获取元素

        var oBox = document.getElementById("box1");

        //1、鼠标按下

        oBox.onmousedown =function(event){

            //事件对象

            event =event||window.event;

            //计算鼠标与盒子左侧和上方的距离

            //左侧距离 = 鼠标水平坐标-盒子左侧偏移距离（offsetLeft）

            //上方距离 = 鼠标垂直坐标-盒子上方偏移距离（offsetTop）

            var lf =event.clientX - oBox.offsetLeft;

            var tp =event.clientY - oBox.offsetTop;

            //2、鼠标移动，盒子随着鼠标移动而移动

           document.onmousemove = function(event){

                event =event||window.event;

                //获取鼠标水平&垂直方向的坐标

                var mouseLeft= event.clientX;

                var mouseTop =event.clientY;

                //设置盒子的left&top值，注意：要为元素加上定位

               oBox.style.left = mouseLeft-lf+"px";

                oBox.style.top= mouseTop-tp+"px";

            //3、松开鼠标，盒子停止

            document.οnmοuseup= function(){

                //取消鼠标移动事件

               document.onmousemove = null;

               document.onmouseup = null;

            }

            /*

                当我们拖拽一个网页中的内容时，浏览器会默认去搜索引擎中搜索内容，此时会导致拖拽功能异常，这是浏览器提供的默认行为，如果不希望发生这个行为，则可以通过return false 来取消默认行为

                但是这个对IE8一下不起作用

            */

            return false;

        }
    }
